  <div class="chat-content" fxLayout="column">
    <perfect-scrollbar #scrollbar fxFlex>
      <div
        class="chat-message"
        *ngFor="let message of chat.messages"
        [ngSwitch]="message.who"
        fxLayout="column"
        fxLayoutAlign="end start">
        <div
          class="partner"
          *ngSwitchCase="'partner'"
          fxFlexAlign="start"
          fxLayout="row"
          fxLayoutAlign="start center">
          <img class="avatar" [src]="message.peer.picture" />
          <span class="message mat-elevation-z1">{{ message.message }}</span>
          <span class="mat-small message-time-partner">{{timeFormat(message.recvTime)}}</span>
        </div>
        <div
          class="me"
          *ngSwitchCase="'me'"
          fxFlexAlign="end"
          fxLayout="row"
          fxLayoutAlign="end center"
        >
          <span class="mat-small message-time-me">{{timeFormat(message.recvTime)}}</span>
          <ng-container *ngIf="message.sendStatus==='failed'">
            <mat-icon color="warn">priority_high</mat-icon>
          </ng-container>
          <span class="message mat-elevation-z1">{{ message.message }}</span>
          <img class="avatar" [src]="message.peer.picture" />
        </div>
      </div>
    </perfect-scrollbar>
  <div class="chat-respond" fxLayout="row" fxLayoutAlign="start center">
    <mat-form-field fxFlex>
      <textarea
        #textInput
        matInput
        (keyup.enter)="onSendTriggered()"
        [(ngModel)]="newMessage"
        [placeholder]="i18n.lang.inpubMessage"></textarea>
    </mat-form-field>
    <button mat-icon-button color="accent" [matMenuTriggerFor]="menu"
      [matMenuTriggerRestoreFocus]=false>
      <mat-icon>sentiment_satisfied_alt</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <ng-container *ngFor="let emoji of emojiArray">
        <button mat-icon-button class="emoji-button"
          (click)="emojiSelect($event); $event.preventDefault(); textInput.focus()">
          {{emoji}}
        </button>
      </ng-container>
    </mat-menu>
  </div>
  </div>
